<template>
    <div class="selector" :class="{'selector-has-label':label}">
        <div v-if="label" class="selecor-label"><Icon v-if="labelIcon" :type="labelIcon"></Icon>{{label}}</div>
        <Select-control v-model="value" :size="size" :transfer="transfer"  :clearable="clearable" :renderTpl="renderTpl" :is-remote="!!path" @query="query($event,postData)" @turning="fetchNext(postData)" :filterable="filterable" :fetching="loading" :option-key="optionKey" :option-code="optionCode" :disabled="disabled" ref="select" :data="tableData" :placeholder="placeholder" @selectOpen="selectOpen">
        </Select-control>
    </div>
</template>
<script>
import SelectControl from "@/element/select";
import DataTable from "mixins/table";
export default {
  mixins: [DataTable],
  props: {
    path: {},
    //标签文字
    label: {},
    labelIcon: {},
    placeholder: {},
    optionKey: {
      default: "id"
    },
    //默认查询并选中第一个
    defaultSelect: {
      default: false
    },
    filterable: {
      default: true
    },
    size: {},
    clearable: {
      default: true
    },
    renderTpl: {},
    optionCode: {
      default: "name"
    },
    transfer: {
      default: false
    },
    postData: {},
    disabled: {},
    hasSearch: {
      default: false
    },
    initValue: {},
    data: {},
    cache: {
      default: false
    }
  },
  data() {
    return {
      initFetch: false,
      searchPath: this.path,
      createdFetch: false,
      value: this.initValue,
      hasData: false,
      appendData: true,
      //搜索不会阻止下一个请求的发送
      mulitQuery: true,
      selectedData: {}
    };
  },
  watch: {
    value(v) {
      this.$emit("input", v);
      var dataRow = null;
      for (let i in this.tableData) {
        if (this.tableData[i][this.optionKey] === v) {
          dataRow = this.tableData[i];
          this.$emit("selectChange", this.tableData[i]);
          break;
        }
      }
      if (dataRow) {
        this.$set(this, "selectedData", dataRow);
      }
      if (!v && v !== 0) {
        this.$emit("selectChange", null);
      }
    },
    initValue(v) {
      this.value = v;
    },
    data(v) {
      if (this.data && this.data.length !== undefined) {
        this.$set(this, "tableData", this.data);
      }
    },
    path() {
      this.searchPath = this.path;
    }
  },
  methods: {
    selectOpen() {
      this.filterKey = null;
      this.$refs.select.notFound = false;
      if ((this.hasData && this.cache) || !this.path) return;
      this.fetch(1, this.postData).then(() => {
        if (!this.fetchCheck()) return;
        //临时处理，重置数据之后visible将会变为false，此处暂时进行强制更改，具体原因待探究
        this.$refs.select.visible = true;
        this.hasData = true;
      });
    },
    fetchCheck() {
      return (
        this.initFetch || (this.$refs.select && this.$refs.select.dropVisible)
      );
    }
  },
  created() {
    if (this.data && this.data.length) {
      this.tableData = this.data;
    }
    if (this.defaultSelect) {
      this.initFetch = true;
      this.fetch(1, this.postData)
        .then(res => {
          if (this.tableData.length) {
            this.value = this.tableData[0][this.optionKey];
          }
        })
        .finally(() => {
          this.initFetch = false;
        });
    }
  },
  components: {
    SelectControl
  }
};
</script>
<style lang="less">
.ivu-modal-body {
  .select-list {
    /*top: 0 !important*/
  }
  .ivu-select {
    position: relative;
  }
}
.selector-has-label {
  display: flex;
  width: 100%;
  .selecor-label {
    padding: 6px 12px;
    background-color: #eee;
    border: 1px solid #dddee1;
    border-top-left-radius: 4px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 4px;
    border-right: none;
    .ivu-icon {
      margin-right: 4px;
    }
  }
  .ivu-select {
    flex: 1;
    .ivu-select-selection {
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px;
    }
  }
}
</style>
